<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <link rel="stylesheet" href="./index.css" /> -->

    <style lang="css">
      * {
        margin: 0;
        padding: 0;
      }

      body {
        background-color: #000000;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100vh;
      }

      canvas {
        width: 100%;
        height: 100%;
        position: absolute;
      }
    </style>
    <title>黑客动画背景</title>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <canvas id="fb"></canvas>

    <!-- <script src="./index.js"></script> -->

    <script>
      var canvas = document.getElementById("canvas");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      var ctx = canvas.getContext("2d");
      var particlesArray = [];
      var fontsize = 24;
      var str = "ABCDEFGHIJKLNMOPQRSTUVWSYZZYSTYUIFGHJCVBNRTYUIERTYUDFGCRYF";
      ctx.font = fontsize + "px Arial";
      var count = 80;

      var cfb = document.getElementById("fb");
      cfb.width = window.innerWidth;
      cfb.height = window.innerWidth;

      var ctxfb = cfb.getContext("2d");
      for (var i = 0; i < cfb.height; i += 3) {
        ctxfb.moveTo(0, i);
        ctxfb.lineTo(cfb.width, i);
        ctxfb.stroke();
      }

      class Particle {
        constructor() {
          this.x = ((Math.random() * (canvas.width / 24)) | 0) * 24;
          this.y = Math.random() * canvas.height;
          this.size = fontsize;
        }

        updated() {
          this.y += this.size;
        }
        draw() {
          ctx.fillStyle = "green";
          ctx.fillText(str[(Math.random() * str.length) | 0], this.x, this.y);
        }
      }

      function init() {
        for (var i = 0; i < count; i++) {
          particlesArray.push(new Particle());
        }
      }

      init();

      function draw() {
        ctx.globalAlpha = 0.1;
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.globalAlpha = 1;
        for (var i = 0; i < particlesArray.length; i++) {
          particlesArray[i].updated();
          particlesArray[i].draw();
          if (particlesArray[i].y > canvas.height) {
            particlesArray[i].y = 0;
            particlesArray[i].x =
              ((Math.random() * (canvas.width / 24)) | 0) * 24;
          }
        }
      }

      setInterval(() => {
        draw();
      }, 100);
    </script>
  </body>
</html>
